<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>个人空间 - 食物食材食品基本信息Web系统</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    body { background: #f6faf6; font-family: '微软雅黑', Arial, sans-serif; }
    .profile-container { 
      max-width: 1100px; 
      width: 1100px;
      height: 600px;
      margin: 32px auto; 
      background: #f4fff4; 
      border-radius: 14px; 
      box-shadow: 0 4px 24px #388e3c22; 
      padding: 0 0 32px 0; 
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .profile-header { 
      display: flex; 
      align-items: center; 
      border-bottom: 1px solid #e0e0e0; 
      padding: 32px 40px 18px 40px; 
      background: #e8f5e9; 
      flex-shrink: 0;
    }
    .profile-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #4caf50; margin-right: 32px; background: #fff; }
    .profile-info { flex: 1; }
    .profile-nickname { font-size: 26px; font-weight: bold; color: #388e3c; }
    .profile-id { color: #888; font-size: 13px; margin-top: 4px; }
    .profile-username { color: #666; font-size: 15px; margin-top: 2px; }
    .profile-edit-btn { background: #fff; color: #388e3c; border: 1.5px solid #4caf50; border-radius: 7px; padding: 7px 28px; font-size: 16px; cursor: pointer; transition: background 0.2s; margin-left: 24px; }
    .profile-edit-btn:hover { background: #e8f5e9; }
    .profile-main { 
      display: flex; 
      margin-top: 18px; 
      flex: 1;
      min-height: 0;
    }
    .profile-menu { 
      width: 210px; 
      border-right: 1px solid #e0e0e0; 
      padding: 0 0 0 0; 
      background: #f4fff4; 
      flex-shrink: 0;
    }
    .profile-menu-list { list-style: none; padding: 0; margin: 0; }
    .profile-menu-list li { padding: 18px 0 18px 38px; font-size: 17px; color: #388e3c; cursor: pointer; border-left: 4px solid transparent; transition: background 0.2s, border-color 0.2s; }
    .profile-menu-list li.active, .profile-menu-list li:hover { background: #e8f5e9; border-left: 4px solid #4caf50; color: #1b5e20; }
    .profile-content { 
      flex: 1; 
      padding: 32px 40px; 
      min-height: 340px; 
      max-width: 700px; 
      margin: 0 auto; 
      overflow-y: auto;
    }
    .profile-section-title { font-size: 20px; font-weight: 600; color: #388e3c; margin-bottom: 18px; }
    .add-table-tabs { display: flex; gap: 18px; margin-bottom: 18px; }
    .add-table-tab { padding: 7px 22px; border-radius: 6px; background: #e8f5e9; color: #388e3c; font-size: 16px; cursor: pointer; border: none; }
    .add-table-tab.active { background: #4caf50; color: #fff; }
    
    /* 修改卡片容器样式，防止闪烁和尺寸不统一 */
    .add-table-list { 
      margin-top: 10px; 
      height: 300px;
      max-width: 700px; 
      margin-left: auto; 
      margin-right: auto; 
      position: relative;
    }
    
    /* 添加加载状态样式 */
    .table-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #888;
      font-size: 16px;
      z-index: 1;
    }
    
    /* 表格容器固定尺寸 */
    .table-container {
      width: 100%;
      height: 300px;
      background: #f6faf6;
      border-radius: 8px;
      overflow: hidden;
      transition: opacity 0.4s ease;
      position: relative;
    }
    
    .table-container table { 
      width: 100%; 
      border-collapse: collapse; 
      background: #f6faf6; 
      border-radius: 8px; 
      overflow: hidden; 
      min-width: 600px; 
    }
    
    .table-container th, .table-container td { 
      border: 1px solid #e0e0e0; 
      padding: 8px 12px; 
      text-align: left; 
    }
    
    .table-container th { 
      background: #e8f5e9; 
      color: #388e3c; 
    }
    
    .table-container tr:nth-child(even) { 
      background: #f4fff4; 
    }
    
    /* 空数据状态样式 */
    .table-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
      color: #aaa;
      font-size: 16px;
      transition: opacity 0.4s ease;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: #f6faf6;
      border-radius: 8px;
    }
    
    #mySuggestionList { 
      height: 300px;
      overflow-y: auto;
      transition: opacity 0.3s ease; 
    }
    
    .suggestion-group { margin-bottom: 28px; max-width: 700px; margin-left: auto; margin-right: auto; }
    .suggestion-group-title { font-size: 17px; color: #388e3c; font-weight: 600; margin-bottom: 10px; }
    .suggestion-item { background: #e8f5e9; border-radius: 8px; box-shadow: 0 2px 8px #388e3c11; padding: 18px 22px; margin-bottom: 12px; border: 1px solid #c8e6c9; min-width: 400px; min-height: 80px; max-width: 700px; margin-left: auto; margin-right: auto; }
    .suggestion-status-badge { display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: 14px; margin-right: 8px; }
    .suggestion-status-pending { background: #fffde7; color: #fbc02d; }
    .suggestion-status-reviewing { background: #e3f2fd; color: #1976d2; }
    .suggestion-status-approved { background: #e8f5e9; color: #388e3c; }
    .suggestion-status-rejected { background: #ffebee; color: #d32f2f; }
  </style>
</head>
<body>
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <div class="profile-container">
    <div class="profile-header">
      <img id="profileAvatar" class="profile-avatar" src="img/avatar.png" alt="头像">
      <div class="profile-info">
        <div class="profile-nickname" id="profileNickname">昵称</div>
        <div class="profile-id" id="profileId">通行ID: </div>
        <div class="profile-username" id="profileUsername">@username</div>
        <div class="profile-email" id="profileEmail" style="color:#388e3c;font-size:15px;margin-top:2px;"></div>
      </div>
      <button class="profile-edit-btn" id="profileEditBtn">编辑</button>
    </div>
    <div id="editEmailModal" class="modal" style="display:none;z-index:9999;">
      <div class="modal-content">
        <div style="font-size:20px;font-weight:600;margin-bottom:12px;color:#388e3c;">编辑邮箱</div>
        <form id="editEmailForm">
          <input type="email" id="newEmailInput" placeholder="请输入新邮箱" style="width:260px;padding:8px 12px;font-size:16px;border:1px solid #ccc;border-radius:6px;outline:none;">
          <div style="margin-top:18px; display:flex; justify-content:flex-end; align-items:center; gap:18px;">
            <button type="submit" class="btn btn-primary" style="width:120px;min-width:120px;">保存</button>
            <button type="button" id="cancelEditEmail" class="btn btn-secondary" style="width:120px;min-width:120px;">取消</button>
          </div>
        </form>
      </div>
    </div>
    <a href="index.html" class="back-home-btn" style="display:inline-block;max-width:140px;width:auto;margin:24px 0 20px 32px;box-sizing:border-box;"><span>返回首页</span></a>
    <div class="profile-main">
      <div class="profile-menu">
        <ul class="profile-menu-list">
          <li class="active" id="menuAdd">我的添加</li>
          <li id="menuSuggestion">我的建议</li>
        </ul>
      </div>
      <div class="profile-content">
        <div id="sectionAdd">
          <div class="profile-section-title">我的添加</div>
          <div class="add-table-tabs">
            <button class="add-table-tab active" data-table="foods">食物表</button>
            <button class="add-table-tab" data-table="ingredients">食材表</button>
            <button class="add-table-tab" data-table="products">食品表</button>
          </div>
          <div class="add-table-list" id="addTableList">
            <!-- 初始加载状态 -->
            <div class="table-loading">加载中...</div>
          </div>
        </div>
        <div id="sectionSuggestion" style="display:none;">
          <div class="profile-section-title">我的建议</div>
          <div id="mySuggestionList"></div>
        </div>
      </div>
    </div>
  </div>
  <script src="js/profile.js"></script>
</body>
</html> 